<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-form label-width="120px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="appTitle"><h3>修改员工信息</h3></div>
                <div class="appTop"><P>基础信息</p></div>
                <el-row :gutter="20">
                    <el-col :span="9">
                        <el-form-item label="姓名" prop="userName">
                            <el-input v-model="ruleForm.userName" placeholder="请输入名字" :maxlength="20"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="角色" prop="roleId">
                           <el-select v-model="ruleForm.roleId" placeholder="请选择" style="width:100%" >
                                <el-option v-for="item in ruleForm.dataType" :key="item.pId" :label="item.sName" :value="item.pId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="appTop"><P>负责区域</p></div>
                <div :offset="1">                  
                     <el-row v-for="(site,index) in ruleForm.dataAgent" :gutter="20" :key="site.key">
                            <el-row>                              
                                <el-col :span="7">
                                    <el-form-item label="所选省：" :prop="'dataAgent.' + index + '.fProvinceId'" :rules="{required: true, message: '所选省不能为空', trigger: 'change'}">
                                         <province v-model="site.fProvinceId" ></province>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="所选市：">
                                        <city v-model="site.fCityId" :province="site.fProvinceId"></city>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="所选区县：">
                                        <region v-model="site.fAreaId" :city="site.fCityId"></region>
                                    </el-form-item>
                                </el-col>
                                    <div class="delBtn"><i class="el-icon-delete" @click.prevent="removeDomain(index)" v-if="index != 0"></i></div>
                            </el-row>
                    </el-row>    
                    <div style="margin-left:55px">
                        <el-button type="primary" @click="addArea"><i class="el-icon-plus"></i>继续添加</el-button>
                    </div>
                </div>
                <el-form-item class="footer">
                    <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                    <el-button @click="resetForm">取消</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>
 
<script>

import Levelbar from '../layout/Levelbar';
import { modifyCompanyStaff, findAgentAreaByOrgUserId, findSysRoles} from 'api/staffManagement';
import { mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
export default{
    components: {Levelbar, province, city, region},
    data() {
        return {
            ruleForm: {
                isProvice: '',
                dataType: [],
                roleId: '',
                userName: '',
                findCity: [],
                findArea: [],
                province: [],
                dataAgent: [
          
                ],
                deleteData: []
            },
            rules: {
                userName: [
                    {required: true, message: '请填写姓名', trigger: 'blur'}
                ],
                roleId: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ]
            }
        }
    },
    created() {
        // this.searchProvice();
        
        this.searchInfo();
        this.getroleType();
    },
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要提交吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let orgUserRegionMaps = this.ruleForm.dataAgent;
                        for (let i=0;i<orgUserRegionMaps.length;i++) {// 遍历数组将里面的多余两个数据删除
                            delete orgUserRegionMaps[i].findArea;
                            delete orgUserRegionMaps[i].findCity;
                        }
                        modifyCompanyStaff(
                            this.$route.params.orgUserId,
                            this.ruleForm.userName,
                            this.ruleForm.roleId,
                            this.ruleForm.deleteData,
                            orgUserRegionMaps
                        ).then(response => {
                            if (response.data.status==200) {
                                this.$message({
                                    type: 'success',
                                    message: response.data.errorMsg
                                })
                                this.$router.push({name: '公司员工管理'});
                            } else {
                                this.$message({
                                    type: 'warning',
                                    message: response.data.errorMsg
                                })
                            }
                        });
                    })
                } else {
                    return false;
                }
            });
        },
    // 查询修改信息
        searchInfo() {
            this.ruleForm.userName = this.$route.params.userName;
            this.ruleForm.roleId=this.$route.params.roleId;
            findAgentAreaByOrgUserId(this.$route.params.orgUserId).then(response => {
                for (let i = 0;i < response.data.content.length;i++) {
                    let diqu = {
                        findCity: [],
                        findArea: [],
                        fProvinceId: '',
                        fCityId: '',
                        fAreaId: '',
                        fAgentType: '',
                        fOrguserId: '',
                        pId: ''
                    }
                    this.ruleForm.dataAgent.push(diqu)
                    diqu.fOrguserId = response.data.content[i].fOrguserId;
                    diqu.fAgentType = response.data.content[i].fAgentType;
                    diqu.pId = response.data.content[i].pId;             
                    this.$nextTick(() => {
                        diqu.fProvinceId = response.data.content[i].fProvinceId;                  
                        this.$nextTick(() => {
                            diqu.fCityId = response.data.content[i].fCityId;
                            this.$nextTick(() => {
                                diqu.fAreaId = response.data.content[i].fAreaId;
                            });
                        });
                    });
                }

            });
        },
       
    // 角色查询
        getroleType() {
            findSysRoles().then(response => {
                let roleId = response.data.content;
                let select = {
                    sName: '请选择',
                    pId: ''
                }
                roleId.unshift(select);
                this.ruleForm.dataType = roleId;
            });
        },
     // 省市区选择
        // searchProvice() {},
        changeProvice(provinceId, index) {
            this.ruleForm.dataAgent[index].findCity = [];
            this.ruleForm.dataAgent[index].findArea = [];
            this.ruleForm.dataAgent[index].fCityId = '';
            this.ruleForm.dataAgent[index].fAreaId = '';
        },
        changeCityId(cityId, index) {
            this.ruleForm.dataAgent[index].findArea = [];
            this.ruleForm.dataAgent[index].fAreaId = '';
        },
    // 删除添加的省市区    
        removeDomain(index) {
            this.ruleForm.deleteData.push(this.ruleForm.dataAgent[index].pId);// 将被删除区域的pId保留下来，组成数组作为参数delOrgUserRegionMaps
            this.ruleForm.dataAgent.splice(index, 1);
        },
    // 添加省市区
        addArea() {
            let area = {
                fProvinceId: '',
                fCityId: '',
                fAreaId: '',
                findCity: [],
                findArea: []
            };
            this.ruleForm.dataAgent.push(area)
        },
    // 跳转
        resetForm() {
            
            this.$router.push({name: '公司员工管理'});  
        }  
    
    }
}
</script>
 
<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        padding-Top:30px;
        background:#fff;
        padding-bottom:170px;
        .appTop{
            padding:40px 0 20px 50px;
            margin-bottom:10px;
            position:relative;
        }
        .appTop p{
            margin-left:15px;
        }
        .el-form-item{
            margin-top:8px;
        }
        .appTop:before {
            content: '';           
            float: left;
            border-radius: 2px;
            width:4px;height:20px;
            background:#ff5e2c;
            margin-top:1px;
        }
        .appTitle{
            padding:40px 0 30px 50px;
            margin-bottom:30px;
            padding-top:10px;
            text-align:center;
            border-bottom:1px solid #ECECEC
        }
        .box{
            margin-left:20px;
            padding-bottom:10px;
            background:#fff;
           .delBtn {
                display: inline-block;
                height: 36px;
                width: 16px;
                color:#999;
                line-height: 56px;
                margin-left:25px;
                i {
                    cursor: pointer;
                }

            }    
        
        }
        .footer{
            text-align:center;
            margin-top:100px;
        }
        .footer .el-button{
            padding:10px 40px;
        }
    }
    
}
 
</style>